@mixin button-size($padding, $font-size, $border-radius) {
    padding: $padding;
    font-size: $font-size;
    border-radius: $border-radius;
}

@mixin button-color($color, $background, $border) {
    color: $color;
    background-color: $background;
    border-color: $border;
    // a inside Button which only work in Chrome
    // http://stackoverflow.com/a/17253457
    > a:only-child {
        color: currentColor;
        &:after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background: transparent;
        }
    }
}

@mixin button-variant($color, $background, $border) {
    @include button-color($color, $background, $border);

    &:hover
    //&:focus mix($color,$btn-primary-color ,0.5)
    {
      @include button-color(darken($color, 15%), darken($background, 15%), darken($border, 15%));

    }
    &:active,
    &.active {
        @include button-color(darken($color, 5%), darken($background, 5%), darken($background, 5%));
    }

    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            @include button-color($btn-disable-color, $btn-disable-bg, $btn-disable-border);
        }
    }
}

@mixin button-custom($color, $background, $border) {
    @include button-color($color, $background, $border);
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            @include button-color($btn-disable-color, $btn-disable-bg, $btn-disable-border);
        }
    }
}

@mixin button-group-base($btnClassName) {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    > .#{$btnClassName} {
        position: relative;
        float: left;
        &:hover,
        //&:focus,
        &:active,
        &.active {
            z-index: 2;
        }
    }

    & .#{$btnClassName}-icon-only .iconfont {
        font-size: 12px;
        position: relative;
        top: 1px;
    }

    &-large .#{$btnClassName}-icon-only .iconfont{
        font-size: 14px;
        top: 2px;
    }

    &-small .#{$btnClassName}-icon-only .iconfont{
        font-size: 10px;
        top: 0;
    }

    &-circle .#{$btnClassName} {
        border-radius: $btn-circle-size;
    }

    // size
    &-large.#{$btn-prefix-cls}-group-circle .#{$btnClassName} {
        border-radius: $btn-circle-size-large;
    }
    &-large {
        & > .#{$btnClassName} {
            @include button-size($btn-padding-large, $btn-font-size-large, $btn-border-radius);
        }
    }

    &-small.#{$btn-prefix-cls}-group-circle .#{$btnClassName} {
        border-radius: $btn-circle-size-small;
    }
    &-small {
        & > .#{$btnClassName}{
            @include button-size($btn-padding-small, $btn-font-size, $btn-border-radius-small);
            > .#{$css-prefix-iconfont} {
                font-size: $btn-font-size;
            }
        }
    }
}

@mixin button-group-vertical-base($btnClassName) {
    display: inline-block;
    vertical-align: middle;
    > .#{$btnClassName} {
        display: block;
        width: 100%;
        max-width: 100%;
        float: none;
    }
}

@mixin btn() {
    display: inline-block;
    margin-bottom: 0;
    font-weight: $btn-font-weight;
    text-align: center;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    line-height: $line-height-base;
    user-select: none;
    @include button-size($btn-padding-base, $btn-font-size, $btn-border-radius);
    // 导致按钮文本显示异常（有色差）
    // transform: translate3d(0, 0, 0);
    //transition: all @transition-time linear;
    transition: color $transition-time linear, background-color $transition-time linear, border $transition-time linear;

    > .#{$css-prefix-iconfont} {
        line-height: 1;
    }

    &,
    &:active,
    &:focus {
        outline-width: 0;
    }
    &.h-btn-focus:active,
    &.h-btn-focus:focus {
        outline-width: 1px;
    }

    &:not([disabled]):hover {
        text-decoration: none;
    }

    &:not([disabled]):active {
        outline: 0;
        transition: none;
    }

    &.disabled,
    &[disabled] {
        cursor: $cursor-disabled;
        > * {
            pointer-events: none;
        }
    }

    &-large {
        @include button-size($btn-padding-large, $btn-font-size-large, $btn-border-radius);
    }

    &-small {
        @include button-size($btn-padding-small, $btn-font-size-small, $btn-border-radius-small);
    }
}

// Default
@mixin btn-default() {
    @include button-variant($btn-default-color, $btn-default-bg, $btn-default-border);

    &:hover
    //&:focus
    {
        @include button-color(darken($primary-color, 10%), white, darken($primary-color, 10%));
    }
    &:active,
    &.active {
        @include button-color(darken($primary-color, 5%), white, darken($primary-color, 5%));
    }
}

// Primary
@mixin btn-primary() {
    @include button-variant($btn-primary-color, $btn-primary-bg, $primary-color);

    &:hover,
    //&:focus,
    &:active,
    &.active {
        color: $btn-primary-color;
    }
}

// Ghost
@mixin btn-ghost() {
    @include button-variant($btn-ghost-color, $btn-ghost-bg, $btn-ghost-border);

    &:hover
    //&:focus
    {
        @include button-color(lighten($primary-color, 10%), $btn-ghost-bg, lighten($primary-color, 10%));
    }
    &:active,
    &.active {
        @include button-color(darken($primary-color, 5%), $btn-ghost-bg, darken($primary-color, 5%));
    }
}

// Dashed
@mixin btn-dashed() {
    @include button-variant($btn-ghost-color, $btn-ghost-bg, $btn-ghost-border);
    border-style: dashed;

    &:hover
    //&:focus
    {
        @include button-color(darken($primary-color, 10%), $btn-ghost-bg, darken($primary-color, 10%));
    }
    &:active,
    &.active {
        @include button-color(darken($primary-color, 5%), $btn-ghost-bg, darken($primary-color, 5%));
    }
}

// Text
@mixin btn-text() {
    @include button-variant($btn-ghost-color, $btn-ghost-bg, transparent);

    // for disabled
    &.disabled,
    &[disabled],
    fieldset[disabled] & {
        &,
        &:hover,
        &:focus,
        &:active,
        &.active {
            @include button-color($btn-disable-color, $btn-ghost-bg, transparent);
        }
    }

    &:hover
        //&:focus
    {
        @include button-color(darken($primary-color, 10%), $btn-ghost-bg, transparent);
    }
    &:active,
    &.active {
        @include button-color(darken($primary-color, 5%), $btn-ghost-bg, transparent);
    }
}

// Danger
@mixin btn-danger() {
    @include button-variant($btn-danger-color, $btn-danger-bg, $btn-danger-border);
    border-style: solid;
    border-radius:4px;

    &:hover
    //&:focus
    {
        @include button-color(darken($btn-danger-color, 10%), $btn-danger-bg, darken($btn-danger-color, 10%));
    }
    &:active,
    &.active {
        @include button-color(darken($btn-danger-color, 5%), $btn-danger-bg, darken($btn-danger-color, 5%));
    }
}

// Transparent
@mixin btn-transparent() {
    @include button-variant($btn-transparent-color, $btn-transparent-bg, $transparent-color);
    border: none;
    background: $btn-transparent-bg !important;
  
    &:hover {
      color: lighten($primary-color, 10%);
    }
    //&:focus,
    &:active,
    &.active {
        color: darken($primary-color, 10%);
    }
  }
@mixin  btn-info () {
    @include button-custom($btn-primary-color, $info-color, $info-color);
    border-style: solid;
    border-radius:4px;
    
    &:hover {
      color: $btn-info-hover-color;
      background-color: $btn-info-hover-bgcolor;
      border-color: $btn-info-hover-border-color;
    }
    &:active,
    &.active {
      color: $btn-info-press-color;
      background-color: $btn-info-press-bgcolor;
      border-color:$btn-info-press-border-color;
    }
  }

// Color
@mixin btn-color($color) {
    @include button-variant($btn-primary-color, $color, $color);

    &:hover,
    &:active,
    &.active {
        color: $btn-primary-color;
    }
}

// Circle for Icon
@mixin btn-circle($btnClassName: h-btn) {
    border-radius: $btn-circle-size;

    &.#{$btnClassName}-large{
        border-radius: $btn-circle-size-large;
    }

    &.#{$btnClassName}-size{
        border-radius: $btn-circle-size-small;
    }

    &.#{$btnClassName}-icon-only{
        @include square($btn-circle-size);
        @include button-size(0, $font-size-base + 2, 50%);

        &.#{$btnClassName}-large{
            @include square($btn-circle-size-large);
            @include button-size(0, $btn-font-size-large + 2, 50%);
        }

        &.#{$btnClassName}-small{
            @include square($btn-circle-size-small);
            @include button-size(0, $font-size-base, 50%);
        }
    }
}

// Group
@mixin btn-group($btnClassName: h-btn) {
    @include button-group-base($btnClassName);

    .#{$btnClassName} + .#{$btnClassName},
    .#{$btnClassName} + &,
    & + .#{$btnClassName},
    & + & {
        margin-left: -1px;
    }

    .#{$btnClassName}:not(:first-child):not(:last-child) {
        border-radius: 0;
    }

    &:not(&-vertical) > .#{$btnClassName}:first-child {
        margin-left: 0;
        &:not(:last-child) {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
        }
    }

    &:not(&-vertical) > .#{$btnClassName}:last-child:not(:first-child) {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
    }

    & > & {
        float: left;
    }

    & > &:not(:first-child):not(:last-child) > .#{$btnClassName} {
        border-radius: 0;
    }

    &:not(&-vertical) > &:first-child:not(:last-child) {
        > .#{$btnClassName}:last-child {
            border-bottom-right-radius: 0;
            border-top-right-radius: 0;
            padding-right: 8px;
        }
    }

    &:not(&-vertical) > &:last-child:not(:first-child) > .#{$btnClassName}:first-child {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0;
        padding-left: 8px;
    }
}

@mixin btn-group-vertical($btnClassName: h-btn) {
    @include button-group-vertical-base($btnClassName);

    .#{$btnClassName} + .#{$btnClassName},
    .#{$btnClassName} + &,
    & + .#{$btnClassName},
    & + & {
        margin-top: -1px;
        margin-left: 0px;
    }

    > .#{$btnClassName}:first-child {
        margin-top: 0;
        &:not(:last-child) {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
    }

    > .#{$btnClassName}:last-child:not(:first-child) {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    & > &:first-child:not(:last-child) {
        > .#{$btnClassName}:last-child {
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            padding-bottom: 8px;
        }
    }

    & > &:last-child:not(:first-child) > .#{$btnClassName}:first-child {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        padding-top: 8px;
    }
}
